<template>
    <div @click="childChange">
        <p>{{children}}</p>
        <p>{{newChildren}}</p>
    </div>
</template>

<script>
    import {watch,computed} from 'vue'
    export default {
        name: "homeChild",
        props:{
            children:{
                type:String,
                value:""
            }
        },
        emits:['changeChild'],
        setup(props,context){
            const childChange = ()=>{
                context.emit('changeChild')
            }
            const newChildren = computed(()=>{
                return props.children +"我是新增的"
            })
            watch(()=>props.children,(newval,oldval)=>{
                console.log(oldval);
                console.log(newval);
            },{deep:true})
            return {
                childChange,
                newChildren
            }
        }
    }
</script>

<style scoped>

</style>